import * as React from 'react';
import CityItem from './cityItem';
import type { onSelectType, city } from './types';
import './index.module.scss';
const { memo } = React;

interface CitySectionProps {
  title: string;
  cities: city[];
  onSelect?: (val: string) => void;
  id: string;
}
function CitySection(props: CitySectionProps) {
  const { title, cities = [], onSelect, id } = props;

  return (
    <ul styleName="city-ul" id={id}>
      <li styleName="city-li" key="title" data-cate={title}>
        {title}
      </li>
      {cities.length > 0 &&
        cities.map((city) => {
          return (
            <CityItem key={city.name} name={city.name} onSelect={onSelect} />
          );
        })}
    </ul>
  );
}
export default memo(CitySection);
